import React, { useEffect, useRef, useState } from 'react'
import { Dimensions, StyleSheet, TouchableOpacity, View, Image, Text } from 'react-native'
import ResizeImage from '../../../components/ResizeImage'
import Heart from './Heart'
const { width: SCREEN_WIDTH } = Dimensions.get('window')

export default function FlatListItem({ item, index }: { item: ArticleSimple, index: number }) {

  const click = () => {
    console.log('点击');
  }

  return (
    <View>
      <TouchableOpacity style={styles.flatListItem} onPress={click}  >
        {/* 如果使用Image组件 那么会固定图片的宽高 */}
        {/* <Image source={{ uri: item.image }} style={styles.mainImage} /> */}
        {/* 自适应组件 图片的原始尺寸 */}
        <ResizeImage uri={item.image} />
        <Text style={styles.titleTxt}>{item.title}</Text>
        <View style={styles.nameLayout}>
          <Image style={styles.avatarImg} source={{ uri: item.avatarUrl }} />
          <Text style={styles.nameTxt}>{item.userName}</Text>
        </View>
      </TouchableOpacity>
      <View style={styles.likeTip}>
        <Heart value={item.isFavorite}
          onValueChanged={(value: boolean) => {
            console.log(`是否点赞${value} `); // 监听回调
          }} />
        <Text style={styles.countTxt}>{item.favoriteCount}</Text>
      </View>

    </View>

  )
}
const styles = StyleSheet.create({
  flatListItem: {
    width: (SCREEN_WIDTH - 18) / 2,
    backgroundColor: "#fff",
    marginLeft: 6,
    marginBottom: 12,
    borderRadius: 6,
    overflow: 'hidden',
  },
  mainImage: {
    width: "100%",
    height: 250,
    resizeMode: "cover"
  },
  titleTxt: {
    fontSize: 14,
    color: '#333',
    marginHorizontal: 10,
    marginVertical: 4,
  },
  nameLayout: {
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 10,
    marginBottom: 10,
  },
  avatarImg: {
    width: 16,
    height: 16,
    resizeMode: 'cover',
    borderRadius: 10,
  },
  nameTxt: {
    fontSize: 12,
    color: '#000',
    marginLeft: 6,
    flex: 1,
  },
  countTxt: {
    fontSize: 12,
    color: '#999',
    marginLeft: 4,
  },
  likeTip: {
    position: 'absolute',
    bottom: 20,
    right: 10,
    flexDirection: 'row',
    alignContent: 'center',
    alignItems: 'center'
  }
})